<template>
  <!--   医疗机构费用分析-->
  <div class="MedicalPriceAnalyze item-analyze">
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="90px">
            <el-row :gutter="12">
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="医疗机构" prop="hospCode">
                  <el-select v-model="searchForm.hospCode" placeholder="请选择" style="width:100%;" @change="hospChange">
                    <el-option
                      v-for="item in hospitalOptions"
                      :key="item.AKB020"
                      :label="item.AKB021"
                      :value="item.AKB020"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="医疗机构级别" prop="medinsLv">
                  <el-select v-model="searchForm.medinsLv" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in levelOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="就诊类型" prop="mdtrtType">
                  <el-select v-model="searchForm.mdtrtType" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in typeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="参保人员类型" prop="lv3PsnType">
                  <el-select v-model="searchForm.lv3PsnType" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in lv3PsnTypeOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="12" :lg="6" :xl="6">
                <el-form-item label="基金来源" prop="fundSouc">
                  <el-select v-model="searchForm.fundSouc" clearable style="width: 100%;" placeholder="请选择">
                    <el-option v-for="item in sourceOptions" :key="item.dictValue" :label="item.dictValue" :value="item.dictCode" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="20" :lg="18" :xl="14">
                <el-form-item label="费用时间" prop="priceTime" class="clearmargin">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
              <el-col :md="4" :lg="24" :xl="4">
                <el-button size="small" type="primary" @click="restSearch">重置</el-button>
                <el-button size="small" type="primary" @click="search">查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </section>
    <section class="layer ts3">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">医疗费用同比情况</span>
            </div>
            <div class="box-body">
              <template v-if="tableShow">
                <el-table
                  v-loading="loading"
                  :data="sameData"
                  element-loading-spinner="el-loading1"
                  border
                  highlight-current-row
                  height="tableHeight"
                  style="width: 100%"
                >
                  <el-table-column prop="name" align="center" width="200px" label="医院" />
                  <el-table-column :show-overflow-tooltip="true" align="center" sortable prop="province" :label="tableLabel" />
                  <el-table-column :show-overflow-tooltip="true" align="center" sortable prop="address" label="全部定点医疗机构" />
                </el-table>
              </template>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header">
              <span class="box-title">医疗费用占比情况</span>
            </div>
            <div class="box-body">
              <my-charts id="medical-price-analyze" :options="chartOption" width="100%" height="100%" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import PriceTime from '../components/PriceTime'
import MyCharts from '@/components/MyCharts/index'
import { toolboxPie } from '@/components/MyCharts/toolbox'
import { queryMedicalExpenses } from '../../../api/assist-decision/medicalPriceAnalyze'
import { getContrastMedicalInstitution } from '../../../api/assist-decision/common'
import { getSelectLabel } from '../../../utils'

export default {
  name: 'MedicalPriceAnalyze',
  mixin: [],
  components: {
    'price-time': PriceTime,
    'my-charts': MyCharts
  },
  props: {},
  data() {
    return {
      loading: false,
      tableShow: false,
      searchForm: {
        hospCode: null, // 机构代码
        hospName: null, // 机构名称
        beginDate: null,
        endDate: null, // 费用时间
        lv3PsnType: null, //  参保人员类型
        mdtrtType: null, //  就诊类型
        medinsLv: null, // 医疗机构级别
        fundSouc: null //  基金来源
      },
      tableLabel: '',
      hospitalOptions: [], // 医疗机构下拉
      sameData: [], // 同比列表
      chartOption: { // 图表配置项
        title: '',
        toolbox: toolboxPie('占比'),
        series: [
          {
            name: '医疗机构',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: [],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  computed: {
    levelOptions: function() {
      return this.$store.getters.selectMaps.MEDINS_LV
    },
    lv3PsnTypeOptions: function() {
      return this.$store.getters.selectMaps.LV3_PSN_TYPE
    },
    sourceOptions: function() {
      return this.$store.getters.selectMaps.FUND_SOUC
    },
    typeOptions: function() {
      return this.$store.getters.selectMaps.MDTRT_TYPE
    }
  },
  watch: {},
  created() {
    this.getContrastMedicalInstitution()
  },
  mounted() {
  },
  methods: {
    //  医疗机构
    getContrastMedicalInstitution() {
      getContrastMedicalInstitution().then(res => {
        this.hospitalOptions = res.data
      })
    },
    hospChange(v) {
      this.searchForm.hospName = getSelectLabel(v, this.hospitalOptions, 'AKB020', 'AKB021')
    },
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },
    restSearch() {
      this.$refs.priceTime.reset() // 子组件重置
      this.searchForm.hospName = null
      this.$refs.searchForm.resetFields()
    },
    search() {
      this.getData()
    },
    //  获取数据
    getData() {
      //  查询医疗费用信息
      queryMedicalExpenses(this.searchForm).then(res => {
        const hospArr = [
          { name: '本期医疗费用（万元）', code: 'curpMedSumfee' },
          { name: '本期记账总费用（万元）', code: 'curpReimSumfee' },
          { name: '同期医疗费用（万元）', code: 'corpMedSumfee' },
          { name: '医疗费用同比（%）', code: 'comparedSpP' },
          { name: '医疗费用环比（%）', code: 'comparedMoM' },
          { name: '均次费用（万元）', code: 'averagCost' },
          { name: '人均费用（万元）', code: 'perCapitaFee' }
        ]
        this.sameData = this.formatRes(hospArr, res.data)
        const arr = []
        res.data.forEach(item => {
          arr.push({ name: item.hospName ? item.hospName : '全部定点医疗机构', value: item.curpMedSumfee })
        })
        this.chartOption.series[0].data = arr
        // [
        // { value: 810, name: '广东省医院一\n80万元(3.78%)' },
        //     { value: 2036, name: '全部定点医疗机构\n2,036万元(46.22%)' },
        //     { value: 4036, name: '全部定点医疗机构\n4,036万元(50%)' }
        // ]
        this.tableLabel = 'aaa'
        this.tableShow = true
      })
    },
    //  转换返回的数据
    formatRes(arr, data) {
      const result = []
      arr.forEach((v) => {
        const obj = {}
        data.forEach((item, index, arr) => {
          obj.name = v.name
          obj.province = arr[index][v.code]
          if (index === arr.length - 1) {
            obj.address = arr[arr.length - 1][v.code]
          } else {
            obj.address = arr[index + 1][v.code]
          }
        })
        result.push(obj)
      })
      return result
    }
  }
}
</script>

<style scoped lang="scss">
  .MedicalPriceAnalyze {
    .el-table {
      height: calc(100% - 40px);
    }
  }
</style>
